<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Model加载示例</title>
    <script src="js/esl.js"></script>
    <script src="js/factory.js"></script>
</head>
<body>
    <h1>Model加载示例</h1>
    <p>本示例展示如何配置来完成Model数据的加载。</p>
    <h2>示例</h2>
    <div id="example">
        <ol id="log"></ol>
        <code><pre id="result"></pre></code>
    </div>
    <script>
        function log(text) {
            document.getElementById('log').innerHTML += '<li>' + text + '</li>';
        }

        require.config({
            'packages': [
                {
                    'name': 'er',
                    'location': '../src',
                    'main': 'main'
                },
                {
                    'name': 'eoo',
                    'location': '../dep/eoo/src',
                    'main': 'main'
                },
                {
                    'name': 'etpl',
                    'location': '../dep/etpl/src',
                    'main': 'main'
                },
                {
                    'name': 'mini-event',
                    'location': '../dep/mini-event/src',
                    'main': 'main'
                },
                {
                    'name': 'emc',
                    'location': '../dep/emc/1.0.0/src',
                    'main': 'main'
                },
                {
                    'name': 'promise',
                    'location': '../dep/promise/1.0.0/src',
                    'main': 'main'
                },
                {
                    'name': 'underscore',
                    'location': '../dep/underscore/src',
                    'main': 'underscore'
                }
            ],
            'paths': {}
        });
        require(
            ['er/Model', 'js/factory'],
            function(Model, factory) {
                var model = new Model();
                model.datasource = [
                    { zero: factory.immediate(0) }, // 直接返回值
                    {
                        noUse: [ // 该key是没用的
                            { ten: factory.delayed(200, 10) },
                            { eleven: factory.delayed(300, 11) },
                            { twelve: factory.delayed(400, 12) }
                        ],
                        thirteen: factory.delayed(500, 13)
                    },
                    {
                        one: factory.delayed(400, 1),
                        two: factory.delayed(300, 2),
                        three: factory.delayed(700, 3),
                        four: factory.delayed(500, 4)
                    },
                    {
                        stillOne: factory.relied(400, 'one'),
                        stillTwo: factory.relied(300, 'two')
                    },
                    function() { // 返回一个对象展开到Model中
                        return {
                            twenty: 20,
                            twentyOne: 21,
                            twentyTwo: 22
                        }
                    },
                    {
                        // 使用数据获取配置项指定name
                        retrieve: function() { return 30; },
                        name: 'thirty'
                    },
                    {
                        retrieve: function() {
                            return {
                                fourty: 40,
                                fourtyOne: 41,
                                fourtyTwo: 42
                            };
                        },
                        dump: true
                    }
                ];

                function dump() {
                    var output = model.valueOf();
                    var json = JSON.stringify(output, null, '    ');
                    var util = require('er/util');
                    document.getElementById('result').innerHTML = util.encodeHTML(json);
                }

                model.load().done(dump);
            }
        );
    </script>
</body>
</html>
